<template>
  <div class="anInfluence">

    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/Blog_Analysis' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>Blog_Analysis</el-breadcrumb-item>
        <el-breadcrumb-item>anInfluence</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="Gcontainer">
      <div id="three">
        <!-- <dv-percent-pond :config="progress_config" style="width:100%;height:100%; background-color: #282c34;" v-if="show_progress"/> -->

        <div style="padding-left: 10px; padding-top: 10px;">
          <h1>最值得阅读的一百篇文章</h1>
          <p>基于加权平均的热度计算</p>
          <p>热度 = w1 × 点赞数 + w2 × 评论数 + w3 × 收藏数</p>
          <br>
        </div>

        <el-table
          :data="hot_data"
          style="width: 100%"
          :row-class-name="tableRowClassName">

          
          <!-- 基本内容 -->
          <el-table-column
            type="index"
            label="热度排名"
            width="80">
          </el-table-column>

          <el-table-column prop="hotness" label="热度值"  width="100">
              <template v-slot="scope">
                <el-tag type="danger">{{ scope.row.hotness.toFixed(2) }}</el-tag>
              </template>
            </el-table-column>

          <el-table-column prop="title" label="文章标题"  :width="table_width+30">
              <template v-slot="scope">
                <!-- <a :href="scope.row.url">{{ scope.row.title }}</a> -->
                <el-link type="primary" :href="scope.row.url" :underline="true">{{ scope.row.title }}</el-link>
              </template>
          </el-table-column>

          <el-table-column prop="author" label="作者"  :width="table_width">
            <template v-slot="scope">
              <!-- <a :href="scope.row.author_url">{{ scope.row.author }}</a> -->
              <el-link type="success" :href="scope.row.author_url" :underline="true">{{ scope.row.author }}</el-link>
            </template>
          </el-table-column>


          <el-table-column prop="time" label="发布时间"  :width="table_width">
              <template v-slot="scope">
                <!-- {{ scope.row.time | dateFormat }} -->
                <el-link :underline="false" type="warning">{{ scope.row.time | dateFormat }}</el-link>
              </template>
            </el-table-column>

            <el-table-column prop="category" label="文章标签"  :width="table_width+30">
              <template v-slot="scope">
                <!-- <el-tag type="danger">{{ scope.row.category }}</el-tag> -->
                <el-link :underline="false" type="primary">{{ scope.row.category }}</el-link>
              </template>
            </el-table-column>

          
        </el-table>
      </div>

      <div style="margin-top: 20px;">
      <h1 style="text-align: center;">关于掘金博客文章，热度数据分析：</h1>
      
        <h2>结论与建议</h2>
        <p>
          掘金博客是一个专注于前端开发的技术社区，每天有大量的优质文章发布，吸引了众多的开发者阅读、点赞、评论和收藏。那么，如何评价一篇文章的热度呢？我们可以使用一个基于加权平均的热度计算公式：

热度 = w1 × 点赞数 + w2 × 评论数 + w3 × 收藏数

其中，w1, w2, w3 是三个权重系数，表示不同的互动行为对热度的贡献程度。这里，我们假设 w1 = 0.6, w2 = 0.2, w3 = 0.2，即点赞数最能反映文章的受欢迎程度，评论数和收藏数次之。

使用这个公式，我们可以对 一万多条 掘金博客文章进行热度排序，得到上述结果。
        </p>
        <p>
          从这个表格中，我们可以看出一些有趣的现象：

- 前端仔电脑里的秘密是热度最高的文章，它的标题很吸引人，让读者想知道前端开发者的电脑里都有什么神秘的东西。它的分类也很广泛，涵盖了前端和程序员两个热门的话题。
- 前端性能优化——首页资源压缩63%、白屏时间缩短86%是热度第二的文章，它的标题很具体，展示了作者在前端性能优化方面的成果，让读者想学习作者的方法和技巧。它的分类也很专业，涉及了前端、性能优化和 Vue.js 三个相关的领域。
- 金三银四，我为面试所准备的100道面试题以及答案，不看要遭老罪喽是热度第三的文章，它的标题很有趣，用了一个俗语“不看要遭老罪”，表示这些面试题很重要，不看就会错过很多机会。它的分类也很明确，就是前端和面试两个话题。
- 除了前端仔电脑里的秘密，其他九篇文章的标题都包含了“前端”这个关键词，说明前端开发是掘金博客的主要内容，也是读者最感兴趣的话题。
- 除了如何让自己的前端知识更全面，其他九篇文章的分类都包含了 Vue.js 这个关键词，说明 Vue.js 是前端开发中最流行的框架，也是读者最想学习的技术。
- 除了可视化大屏：autofit.js 一行搞定自适应，其他九篇文章的发布时间都在 2023 年的前三个月，说明这些文章都是比较新的，也反映了前端开发的快速变化和更新。

总之，通过对掘金博客文章的热度排序和分析，我们可以了解到前端开发的最新动态和最热门的话题，也可以学习到一些优秀的文章的写作技巧和标题设计。希望这篇数据分析小短文能给你一些启发和帮助。😊
        </p>


        <div style="height: 200px;width: 200px;"></div>
    </div>
    </div>

  </div>
</template>
  
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      // 进度条
      // show_progress: true,
      // 进度条配置
      // progress_config: {
      //   value: 0,
      //   borderWidth: 5,
      //   borderRadius: 10,
      //   borderGap: 5,
      //   colors: ['#01c4f9', '#c135ff'],
      // },
      // 热度数据
      hot_data: [
        {
          "title": "🛬🛬🛬前端仔电脑里的秘密",
          "url": "https://juejin.cn/post/7187272143657730108",
          "hotness": 4711.8,
          "author": "超神熊猫",
          "author_url": "https://juejin.cn/user/2225067267195454/posts",
          "category": "前端\n程序员",
          "time": "2023-01-11T06:06:42.000Z"
        }
      ],
      // 表格宽高，宽度是内部的，高度是大表格的，防止撑开不算overflow，命名歧义就不管了
      table_width: 100,
      table_height: 100,
      
    }
  },

  mounted() {
    this.getCategory()
    this.changeWidth()

    // 让进度条动起来
    // setInterval(()=>{
    //   if (this.progress_config.value < 99) {
    //     //响应式修改数据
    //     this.$set(this.progress_config,'value',this.progress_config.value+1)
    //     //重新生成一个新的对象，进行赋值
    //     this.progress_config={...this.progress_config}
    //   } 
    // },1)
  },
  methods: {
    getCategory() {
      // http://127.0.0.1:8888/influence
      this.$http({
        url: '/influence',
        method: 'post'
      }).then(res => {
        if (res.data.meta.status !== 200) {
          return this.$message.error('获取文章热度分析数据失败')
        } else {
          // 关闭进度条
          // this.show_progress = false
          
          this.hot_data = res.data.data
        }
      }).catch(res => {
        console.log(res);
      })
    },
    // 表格奇偶行变色
    tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
    },
    // 根据one盒子宽高，分配表格列宽度，后期可以用computed计算属性，实时修改
    changeWidth() {
      const element = document.getElementById("three");
      const acturalWidth = element.offsetWidth;
      const acturalHeight = element.offsetHeight;
      // console.log(inlineWidth)
      this.table_width = acturalWidth / 5
    }
  }
}
</script>

<style scoped>
.anInfluence {
  width: 100%;
  height: 100%;
  overflow: scroll;
  padding: 5px;
}
/* 去除滚动栏，保留滚动效果 */
.anInfluence::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.Gcontainer {
  margin-top: 5px;
  width: 100%;
  height: 98%;
  /* background-color: azure; */

  box-sizing: border-box;
  padding: 5px;
  /* overflow: hidden; */
}
/* 去除滚动栏，保留滚动效果 */
.Gcontainer::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

#three {
  /* text-align: center; */
  /* color: white; */
  /* background-color: rgb(51, 55, 68); */
  width: 100%;
  height: 92%;
  /* flex: 1 1 48%; 设置子元素占满一行，每行两个子元素    */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: scroll;
  margin-bottom: 20px;
  
}
/* 去除滚动栏，保留滚动效果 */
#three::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

#three .hot_rank_item:nth-child(odd) {
  /* background: oldlace; */
  border-left: 10px solid #01c3f954;
  border-right: 10px solid #01c3f954;
  padding-left: 10px;
}

#three .hot_rank_item:nth-child(even) {
  /* background: #c235ff59; */
  border-left: 10px solid #c235ff59;
  border-right: 10px solid #c235ff59;
  padding-left: 10px;
}

.hot_rank_item {
  width: 99%;
  height: 50px;
  margin: 0 auto;
  display: flex;
  margin-bottom: 4px;
  border-radius: 3px;
}

#three .hot_rank_item:hover {
  cursor: pointer;
  background: rgba(255, 207, 75, 0.651);
}

.hot_rank_item div {
  width: 50%;
  height: 100%;
  text-align: center;
}
#three .warning-row {
   background: oldlace;
 }
 #three .success-row {
   background: #f0f9eb;
 }
</style>